<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       html, body{
            margin: 0;
            height: 100%;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            height: 100%;
            /* 将元素盒转化为弹性盒  */
            display: flex; 
            /* flex-direction定义弹性盒的主轴方向 默认值是row 
            row表示正序横向 column是纵向正序
            row-reverse 横向倒序排列
            column-reverse 纵向倒序排列
            */
            /* flex-flow flex-direction和flex-warp的组合 */
            flex-flow: row, wrap-reverse;
            /* flex-direction: row; */
            /* flex-wrap 定义内容溢出是否换行 默认值是nowrap 不换行
                warp换行 
                warp-reverse倒序换行 行的顺序倒转
             */
            /* flex-wrap: wrap; */
            /* 主轴方向上的排列方式 */
            /* space-between 中间留白两边对齐
                space-around 两边的空白是弹性项中间的空白的一半、
                flex-start 默认值 靠左排列
                flex-end是靠右排列
                center居中
             */
            justify-content: space-between;
            /* align-items主轴的交叉轴上的对齐方式
                flex-start默认值 顶端对齐
                center居中
                flex-end尾部对齐
                baseline基线对齐
                align-items 只有一行时才会生效
             */
            /* align-items: flex-start; */
            /* align-content 多行是交叉轴方向上的对齐方式 */
            /* align-content: center; */
        }

        li {
            height: 100px;
            /* flex-basis是弹性项 弹性项指的是弹性盒中的一级元素
            flex-basis是弹性项在主轴方向上的扩展距离
             */
             /* margin: 10px; */
            flex-basis: 20%;
            background-color: red;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-weight: bold;
            font-size: 20px;
            flex-shrink: 1;
            /* grow 控制弹性项的放大比例 */
            flex-grow: 1;
            order: 1;
        }
        
        li:nth-child(2) {
            /* font-size: 50px; */
            /* flex-shrink 设置弹性项的缩小比例 */
            /* flex-shrink: 0; */
            /* flex: 1; flex-grow flex-shrink flex-basis  */
            /* flex: 1;  */
            flex-grow: 3;
            background-color: green;
        }
        li:nth-child(3) {
            /* font-size: 30px;
            flex-shrink: 2; */
            order: 0;
        }
    </style>
</head>
<body>
    <!-- 弹性布局 -->
    <ul>
        <li>1item</li>
        <li>2item</li>
        <li>3item</li>
        <li>4item</li>
        <!-- <li>5item</li>
        <li>6item</li> -->
    </ul>
</body>
</html>